<script>
import { mapState } from 'vuex'

export default {
  name: 'addOrEditForm',
  props: {
    edit: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      formData: {
        // 车牌号码
        licensePlate: '',
        // GPS设备id
        deviceGpsId: '',
        // 车辆类型Id
        truckTypeId: ''
      },
      formRules: {
        licensePlate: [
          { required: true, message: '请输入车牌号码', trigger: 'blur' }
        ],
        deviceGpsId: [
          { required: true, message: '请输入GBS设备ID', trigger: 'blur' }
        ],
        truckTypeId: [
          { required: true, message: '请选择车辆类型', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    /*
    * 清空表单数据的回调函数
    *  */
    resetFormData() {
      this.$refs.formRef.resetFields()
      delete this.formData.id
    },
    /*
    * 获取车辆详情的回调函数
    *  */
    async fetchVehicleDetail(vehicleId) {
      try {
        const { deviceGpsId, truckTypeId, licensePlate, id } = await this.$store.dispatch('vehicleListStore/fetchVehicleDetailAction', vehicleId)
        this.formData.deviceGpsId = deviceGpsId
        this.formData.truckTypeId = truckTypeId
        this.formData.licensePlate = licensePlate
        this.formData.id = id
      } catch (error) {
        this.$message.error(error.message)
      }
    }
  },
  computed: {
    ...mapState('carModelsStore', ['carModelsListType'])
  }
}
</script>

<template>
  <el-form label-width="100px" :model="formData" :rules="formRules" ref="formRef">
    <el-form-item label="车辆类型" prop="truckTypeId">
      <el-select v-model="formData.truckTypeId">
        <el-option v-for="(item) in carModelsListType" :value="item.id" :label="item.name" :key="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="车牌号码" prop="licensePlate">
      <el-input placeholder="请输入车牌号码" v-model="formData.licensePlate"></el-input>
    </el-form-item>
    <el-form-item label="GPS设备ID" prop="deviceGpsId">
      <el-input placeholder="请输入GBS设备ID" v-model="formData.deviceGpsId"></el-input>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">
.el-form {
  width: 80%;

  .el-select {
    width: 100%;
  }
}
</style>
